<template>
  <div class="contain">
    <RegisterDialog ref="register" />
    <RegisterDialog ref="register" />
    <div class="header-top">
      <ul>
        <li v-if="!$store.state.isLogin">
          <a @click="openDialog">登录</a>
          <span class="divide">|</span>
        </li>
        <li class="registerBtn" v-if="!$store.state.isLogin">
          <a @click="openRegister">注册</a>
        </li>
        <li
          v-if="
            $store.state.isLogin == true &&
            $store.state.userInfo != null
          "
        >
          <el-dropdown :hide-on-click="false" @command="exit">
            <span class="el-dropdown-link">
              {{ $store.state.userInfo.username
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><router-link :to="{ name: 'Home' }"
                  >退出登录</router-link
                ></el-dropdown-item
              >
            </el-dropdown-menu></el-dropdown
          >
        </li>
        <li>
          <router-link :to="{ name: 'MyTips' }">我的订单</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'MyCollection' }">我的收藏</router-link>
        </li>
        <li>
          <router-link
            :to="{
              name: 'MyShop',
            }"
            class="shopping-car"
          >
            <img src="../assets/购物车.png" alt="" />
            <span>购物车 ({{ this.$store.getters.getUserShopNum }})</span>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="hearder-bottom">
      <div class="bottom-content">
        <img src="../assets/SHoplogo.png" alt="" />
        <ul>
          <li :class="this.$route.path.indexOf('/home') == 0 ? 'activeLi' : ''">
            <router-link :to="{ name: 'Home' }">首页</router-link>
          </li>
          <li
            :class="
              this.$route.path.indexOf('/all-store') == 0 ? 'activeLi' : ''
            "
          >
            <router-link :to="{ name: 'AllStore' }">全部商品</router-link>
          </li>
          <li
            :class="
              this.$route.path.indexOf('/about-us') == 0 ? 'activeLi' : ''
            "
          >
            <router-link :to="{ name: 'AboutUs' }">关于我们</router-link>
          </li>
        </ul>
        <form action="">
          <div class="inputText">
            <input type="text" placeholder="请输入搜索内容" />
          </div>
          <button class="submit">
            <img src="../assets/search.png" alt="" />
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { removeToken } from "../utils/cookie";
import RegisterDialog from "./RegisterDialog.vue";
export default {
  name: "HeaderPage",
  data() {
    return {};
  },
  created() {
    this.init();
  },
  mounted() {
  },
  updated() {    
  },

  methods: {
    init() {
      this.$store.dispatch('getUsername');
    },
    openDialog() {
      this.$refs.register.showLogin();
    },
    openRegister() {
      this.$refs.register.showRegister();
    },
    exit() {
      this.$store.dispatch("setUserInfo");
      localStorage.removeItem("selection");
      removeToken("token");
      this.$store.commit("setLoginState");
    },
  },
  components: { RegisterDialog },
};
</script>

<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.contain {
  height: 122px;
  width: 100%;
}
.registerBtn {
  margin-left: 0px !important;
}
.header-top {
  height: 42px;
  width: 100%;
  background-color: #3d3d3d;
  ul {
    margin: auto;
    width: 1200px;
    display: flex;
    justify-content: flex-end;
    .divide {
      margin: 0 8px;
      text-align: center;
      color: #b0b0b0;
    }
    li {
      margin-left: 20px;
      line-height: 42px;
      height: 42px;
    }
    li:hover {
      a {
        color: #ffffff;
      }
    }
  }
}

a {
  text-decoration: none;
  font-size: 14px;
  color: #b0b0b0;
}
a:hover {
  cursor: pointer;
}
router-link-active {
  text-decoration: none;
}
.shopping-car {
  display: flex;
  width: 120px;
  height: 42px;
  background-color: #424242;
  img {
    margin: 14px 8px 14px 14px;
    width: 14px;
    height: 14px;
  }
  > span {
    width: 80%;
    height: 100%;
  }
}

.hearder-bottom {
  width: 100%;
  height: 80px;
  .bottom-content {
    width: 1200px;
    height: 80px;
    margin: auto;
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    img {
      margin-top: 20px;
    }
    ul {
      display: flex;
      width: 260px;
      height: 62px;
      margin: 18px 0 0 102px;
      li {
        color: #909399;
        font-size: 14px;
        height: 62px;
        padding: 24px 20px 22px;
        box-sizing: border-box;
      }
      li:hover {
        a {
          color: #409eff;
        }
        border-bottom: 2px solid #409eff;
      }
    }
    form {
      margin: 30px 0 0 352px;
      width: 300px;
      height: 40px;
      display: flex;
    }
    .submit {
      width: 56px;
      height: 39px;
      box-sizing: border-box;
      background: #f5f7fa;
      border: 1px solid #dcdfe6;
      border-radius: 0px 4px 4px 0px;
      img {
        margin: auto;
        line-height: 39px;
      }
    }
    .inputText {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      height: 100%;
      width: 244px;
      box-sizing: border-box;
      &::-webkit-input-placeholder {
        color: #c0c4cc;
        font-size: 14px;
        font-weight: normal;
      }
      input {
        border: none;
        outline: none;
        margin: 13px 0px 13px 18px;
      }
    }
  }
}

.activeLi {
  border-bottom: 2px solid #409eff;
  a {
    color: #409eff;
  }
}
</style>
